<template>
	<div class="top">
		<div class="region">
			<router-link to="/city">
				<label>{{cityname}}</label><i class="iconfont">&#xe600;</i>
			</router-link>
			<form class="search">
				<i class="iconfont">&#xe86e;</i><input type="text" placeholder="国内秋色盘点大全"/>
			</form>
		</div>
		<p>
			<label>热度</label>
			<router-link to="/" v-for="it in txtlist" :key="it.id">{{it.url}}</router-link>
		</p>
		<div class="swiper b-swiper">
		    <ul class="swiper-wrapper">
		        <li class="swiper-slide" v-for="it in imglist" :key="it.id">
					<img :src="it.url" />
				</li>
		    </ul>
		    <div class="swiper-pagination"></div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Banner',
		props:{
			propBanner:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		data(){
			return{
				imglist:[],
				txtlist:[]
			}
		},
		updated(){
			new Swiper('.b-swiper',{
				//循环播放
				loop:true,
				//设置分页器效果
				pagination:{
					el:'.swiper-pagination'
				},
				//设置播放项：时间，不停止，手指
				autoplay:{
					delay:3000,
					stopOnLastSlide:false,
					disableOnInteraction:false
				}
				
			})
		},
		watch:{
			propBanner(){
				this.imglist=this.propBanner.img
				this.txtlist=this.propBanner.txt
			}
		},
		computed:{
			...mapState(['cityname'])
		},
	}
</script>

<style scoped>
	.top{
		width: 100%;
		height: 5.2rem;
		background: gold;
		padding-top: 0.5rem;
	}
	.region{
		width: 100%;
		height: 0.5rem;
		display: flex;
		align-items: center;
	}
	.region a{
		color:black;
		text-decoration:none;
		width:30%;
		height: 100%;
	}
	.region a label{
		font-weight: bold;
		font-size: 0.4rem;
		padding-left: 0.5rem;
	}
	.region a i{
		font-weight: bold;
		font-size: large;
		padding-right:1rem;
	}
	.region form{
		float: right;
		width: 64%;
		height: 0.7rem;
		background: white;
		border-radius: 1rem;	
		padding-left: 0.3rem;
		margin-right: 1rem;
		display: flex;
		align-items: center;
	}
	.region form input{
		border: none;
	}
	.top p{
		height: 0.6rem;
		width: 95%;
		margin-top: 0.5rem;
		padding-left: 0.3rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.top p a{
		background: #ffeea0;
		height: 80%;
		border-radius: 0.6rem;
		border: none;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.9rem;
		color: black;
	}
	.b-swiper{
		width: 93%;
		height: 4.5rem;
		border-radius: 0.5rem;
		margin:  0.3rem auto;
	}
	.b-swiper img{
		width: 100%;
		height: 100%;
<<<<<<< HEAD
=======
		background-size: 100% 100%;
>>>>>>> 77570f9 (游侠客暂时完成)
	}
</style>
